<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" v-auth="'test.create'" @click="create"></el-button>
                <el-button type="danger" plain icon="el-icon-delete" v-auth="'test.delete'" v-if="selection.length>0" :disabled="selection.length==0" @click="dels"></el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input v-model="search" placeholder="搜索" @clear="this.$TABLE.searchSubmit(this)" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="this.$TABLE.searchSubmit(this)"></el-button>
                    <imiFilterBar :options="options" @filterChange="filterChange"></imiFilterBar>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" row-key="id" :apiObj="apiObj" :params="params" @selection-change="selectionChange" stripe remoteSort remoteFilter>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="ID" prop="id" >
                                    
				</el-table-column>
                <el-table-column label="会员ID" prop="user_id" >
                                    
				</el-table-column>
                <el-table-column label="管理员ID" prop="admin_id" >
                                    
				</el-table-column>
                <el-table-column label="分类ID(单选)" prop="category_id" >
                                    
				</el-table-column>
                <el-table-column label="分类ID(多选)" prop="category_ids" >
                                    
				</el-table-column>
                <el-table-column label="标签" prop="tags" >
                                    
				</el-table-column>
                <el-table-column label="星期(单选):monday=星期一,tuesday=星期二,wednesday=星期三" prop="week" >
                                    
				</el-table-column>
                <el-table-column label="标志(多选):hot=热门,index=首页,recommend=推荐" prop="flag" >
                                    
				</el-table-column>
                <el-table-column label="性别(单选):male=男,female=女" prop="genderdata" >
                                    
				</el-table-column>
                <el-table-column label="爱好(多选):music=音乐,reading=读书,swimming=游泳" prop="hobbydata" >
                                    
				</el-table-column>
                <el-table-column label="标题" prop="title" >
                                    
				</el-table-column>
                <el-table-column label="图片" prop="image" >
                    <template #default="scope">
                    <el-avatar :src="scope.row.image" size="small"></el-avatar>
                    </template>                
				</el-table-column>
                <el-table-column label="图片组" prop="images" >
                                    
				</el-table-column>
                <el-table-column label="附件" prop="attachfile" >
                                    
				</el-table-column>
                <el-table-column label="关键字" prop="keywords" >
                                    
				</el-table-column>
                <el-table-column label="描述" prop="description" >
                                    
				</el-table-column>
                <el-table-column label="省市" prop="city" >
                                    
				</el-table-column>
                <el-table-column label="配置:key=名称,value=值" prop="json" >
                                    
				</el-table-column>
                <el-table-column label="二维数组:title=标题,intro=介绍,author=作者,age=年龄" prop="multiplejson" >
                                    
				</el-table-column>
                <el-table-column label="价格" prop="price" >
                                    
				</el-table-column>
                <el-table-column label="点击" prop="views" >
                                    
				</el-table-column>
                <el-table-column label="时间区间" prop="workrange" >
                                    
				</el-table-column>
                <el-table-column label="开始日期" prop="startdate" >
                                    
				</el-table-column>
                <el-table-column label="活动时间(datetime)" prop="activitytime"  align="right" width="180" :formatter="this.$TABLE.datetime">
                                    
				</el-table-column>
                <el-table-column label="年" prop="year" >
                                    
				</el-table-column>
                <el-table-column label="时间" prop="times" >
                                    
				</el-table-column>
                <el-table-column label="刷新时间" prop="refreshtime"  align="right" width="180" :formatter="this.$TABLE.datetime">
                                    
				</el-table-column>
                <el-table-column label="创建时间" prop="createtime"  align="right" width="180" :formatter="this.$TABLE.datetime">
                                    
				</el-table-column>
                <el-table-column label="更新时间" prop="updatetime"  align="right" width="180" :formatter="this.$TABLE.datetime">
                                    
				</el-table-column>
                <el-table-column label="删除时间" prop="deletetime"  align="right" width="180" :formatter="this.$TABLE.datetime">
                                    
				</el-table-column>
                <el-table-column label="权重" prop="weigh" >
                    <template #default>
                    <el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
                    </template>                
				</el-table-column>
                <el-table-column label="开关" prop="switch" >
                                    
				</el-table-column>
                <el-table-column label="状态" prop="status" >
                                    
				</el-table-column>
                <el-table-column label="状态值:0=禁用,1=正常,2=推荐" prop="state" >
                                    
				</el-table-column>
                
                <el-table-column label="操作" fixed="right" align="right" width="140">
                    <template #default="scope">
                        <el-button type="text" v-auth="'test.update'" size="small" @click="update(scope.row)">编辑
                        </el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="del(scope.row)">
                            <template #reference>
                                <el-button type="text" v-auth="'test.delete'" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
    import saveDialog from './save';
    import imiFilterBar from '@/components/imiFilterBar';
    export default {
        name: 'test',
        components: {
            saveDialog,
            imiFilterBar
        },
        data() {
            return {
                options: [
                    {
                        label: 'ID',
                        value: 'id',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '会员ID',
                        value: 'user_id',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '管理员ID',
                        value: 'admin_id',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '分类ID(单选)',
                        value: 'category_id',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '分类ID(多选)',
                        value: 'category_ids',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '标签',
                        value: 'tags',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '星期(单选):monday=星期一,tuesday=星期二,wednesday=星期三',
                        value: 'week',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '标志(多选):hot=热门,index=首页,recommend=推荐',
                        value: 'flag',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '性别(单选):male=男,female=女',
                        value: 'genderdata',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '爱好(多选):music=音乐,reading=读书,swimming=游泳',
                        value: 'hobbydata',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '标题',
                        value: 'title',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '图片组',
                        value: 'images',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '附件',
                        value: 'attachfile',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '关键字',
                        value: 'keywords',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '描述',
                        value: 'description',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '省市',
                        value: 'city',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '配置:key=名称,value=值',
                        value: 'json',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '二维数组:title=标题,intro=介绍,author=作者,age=年龄',
                        value: 'multiplejson',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '价格',
                        value: 'price',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '点击',
                        value: 'views',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '时间区间',
                        value: 'workrange',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '开始日期',
                        value: 'startdate',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '活动时间(datetime)',
                        value: 'activitytime',
                        type: 'datetimerange',
                        operator: 'between',
                    },
					{
                        label: '年',
                        value: 'year',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '时间',
                        value: 'times',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '刷新时间',
                        value: 'refreshtime',
                        type: 'datetimerange',
                        operator: 'between',
                    },
					{
                        label: '创建时间',
                        value: 'createtime',
                        type: 'datetimerange',
                        operator: 'between',
                    },
					{
                        label: '更新时间',
                        value: 'updatetime',
                        type: 'datetimerange',
                        operator: 'between',
                    },
					{
                        label: '删除时间',
                        value: 'deletetime',
                        type: 'datetimerange',
                        operator: 'between',
                    },
					{
                        label: '开关',
                        value: 'switch',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '状态',
                        value: 'status',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '状态值:0=禁用,1=正常,2=推荐',
                        value: 'state',
                        type: 'text',
                        operator: '=',
                    },
					                    
                ],
                dialog: {
                    save: false
                },
                apiObj: this.$API.test.read,
                selection: [],
                search: '',
                params:{},
            }
        },
        created() {
            this.$TABLE.setFilterValue(this);
        },
        mounted() {
            this.$TABLE.rowDrop(this,this.$API.test.sort);
        },
        methods: {
            filterChange(data) {
                this.$TABLE.filter(data, this);
            },
            create() {
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open()
                })
            },
            update(row) {
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('update').setData(row)
                })
            },
            async del(row) {
                var res = await this.$API.test.delete.post({ids: row.id});
                if (res.code == 200) {
                    this.$refs.table.refresh()
                    this.$message.success(res.message)
                } else {
                    this.$alert(res.message, "提示", {type: 'error'})
                }
            },
            async dels() {
                if (!this.selection.length) {
                    this.$message.warning("请选择要删除的数据")
                    return false;
                }
                var ids = [];
                for (const i in this.selection) {
                    ids.push(this.selection[i].id)
                }
                this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading();
                    this.$API.test.delete.post({ids:ids}).then(res => {
                        if (res.code == 200) {
                            this.$refs.table.refresh()
                            this.$message.success(res.message)
                        } else {
                            this.$message.error(res.message)
                        }
                        loading.close();
                    });
                })
            },
            selectionChange(selection) {
                this.selection = selection;
            },
            handleSuccess() {
                this.$refs.table.refresh()
            }
        }
    }
</script>